import Taro from '@tarojs/taro'
import { Image, Navigator, ScrollView, View } from "@tarojs/components";
import './HorizonList.scss'
import { PAGE_URLS } from "../../../app.config";

interface Interface {
    data?: any;
}

class HorizonList extends Taro.Component<Interface, {}> {

    componentWillMount() {}

    render() {
        const { data } = this.props;
        const isBook = true;
        const url = isBook ? PAGE_URLS.BOOK_DETAIL : PAGE_URLS.BOOK_LIST_DETAIL;

        // 以rpx为单位计算图片宽高
        let imgWidth, imgHeight;
        const sideSpace = 24;
        imgWidth = (750 - 24 * 2 - sideSpace * 2) / 3; // 24是两张图片之间的距离
        imgHeight = (imgWidth * 300) / 218; // 图片宽高比为218/300

        return (
            <ScrollView className='my-horizon-list-container' scrollX>
                <View className='my-horizon-list'>
                    {data && data.map(item => {
                        return (
                            <Navigator
                                key={item.id}
                                url={`${url}?id=${item.id}`}
                                className='my-horizon-list-item'
                                hoverClass='None'
                                style={{ width: Taro.pxTransform(imgWidth) }}>
                                <Image
                                    className={
                                        isBook
                                            ? "my-horizon-list-item__book"
                                            : "my-horizon-list-item__booklist"
                                    }
                                    style={{
                                        width: Taro.pxTransform(imgWidth),
                                        height: isBook
                                            ? Taro.pxTransform(imgHeight)
                                            : Taro.pxTransform(imgWidth)
                                    }}
                                    src={item.image}
                                    mode='aspectFill'
                                />
                                <View className='my-horizon-list-item__title'>
                                    {item.title}
                                </View>
                                {isBook && (
                                    <View className='my-horizon-list-item__author'>
                                        {item.author}
                                    </View>
                                )}
                            </Navigator>
                        );
                    })}
                </View>
            </ScrollView>
        );
    }
}

export default HorizonList
